<template>
  <div class="unit" :class="{
      transparent: transparent,
      up: up,
      down: down,
      mini: mini
    }">
    <div v-if="top" class="top-label">{{ label }}</div>
    <div class="top">
      <div class="value">{{ display }}</div>
      <div class="status">
        <a-icon :type="iconName" />
      </div>
    </div>
    <div v-if="!mini" class="label">{{ label }}</div>
  </div>
</template>

<script>
export default {
  props: {
    value: Number,
    label: String,
    status: String,
    backgroundColor: String,
    transparent: Boolean,
    mini: Boolean,
    top: Boolean
  },
  computed: {
    display () {
      return this.value.toFixed(1)
    },
    iconName () {
      switch (this.status) {
        case 'up':
          return 'caret-up'
        case 'down':
          return 'caret-down'
        default:
          return 'minus'
      }
    },
    up () {
      return this.status === 'up'
    },
    down () {
      return this.status === 'down'
    }
  }
}
</script>

<style scoped lang="scss">
.unit {
  text-align: center;
  padding: 10px 0;
  background-color: #fff;
  color: #5F93F3;
  & + .unit {
    margin-top: 8px;
  }
  .top {
    font-size: 48px;
    font-weight: 400;
    padding: 0 5px;
    display: flex;
    justify-content: center;
    align-items: baseline;
    .status {
      height: 36px;
      font-size: 24px;
    }
  }
  .label {
    font-size: 14px;
    color: #999;
  }
  .top-label {
    font-size: 12px;
    line-height: 24px;
    color: #999;
  }
  &.up {
    color: #E5353A;
  }
  &.down {
    color: #50D372;
  }
  &.transparent {
    background-color: transparent;
    color: #fff;
    .label {
      color: #fff;
    }
  }
  &.mini {
    background-color: transparent;
    .top {
      font-size: 14px;
    }
    .status {
      height: 24px;
      font-size: 10px;
    }
    & + .unit {
      margin-top: 0;
    }
  }
}
</style>
